<template>
  <div class="app-container">
    <el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom: 30px" />
    <el-button type="text" @click="addFirstSubject()">添加一级分类</el-button>
    <el-tree ref="subjectTree" :data="subjectList" :props="defaultProps" :filter-node-method="filterNode"
      :expand-on-click-node="false" class="filter-tree" default-expand-all node-key="id">
      <span slot-scope="{ node, data }" class="custom-tree-node">
        <span>{{ node.label }}</span>
        <span>
          <!-- 使用Chrome的Vue插件调试 -->
          <el-button v-if="node.level == 1" type="text" size="mini" @click="() => append(data)">添加二级分类</el-button>
          <el-button v-if="node.level == 2 || node.level == 1" type="text" size="mini"
            @click="() => remove(node, data)">删除</el-button>
        </span>
      </span>
    </el-tree>

    <el-dialog :visible.sync="dialogFormVisible" title="添加分类">
      <el-form :model="subject" label-width="120px">
        <el-form-item label="分类标题">
          <el-input v-model="subject.title" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveSubject()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getNestedTreeList, removeSubjectId, insertSubject } from "@/api/subject";
  export default {
    data() {
      return {
        filterText: "",
        subjectList: [],
        defaultProps: {
          children: "children",
          label: "title",
        },
        dialogFormVisible: false,//是否显示弹框
        subject: {
          id: "",
          parentId: "",
          title: ""
        }
      };
    },
    watch: {
      filterText(val) {
        this.$refs.subjectTree.filter(val);
      },
    },
    created() {
      this.fetchNodeList();
    },
    methods: {
      //添加一级分类
      addFirstSubject() {
        this.dialogFormVisible = true
        this.subject.parentId = '0'
      },
      //添加二级分类
      append(data){
        this.dialogFormVisible = true
        this.subject.parentId=data.id
      },
      //保存分类
      saveSubject() {
        insertSubject(this.subject).then(res => {
          this.dialogFormVisible = false
          this.fetchNodeList()
          if (res.success) {
            this.$message({
              type: "success",
              message: "添加成功",
            })
            this.subject.title = ""
            this.subject.parentId = ""
          } else {
            this.$message({
              type: "error",
              message: "添加失败",
            })
          }

        }).catch(err => {
          this.dialogFormVisible = false
          this.$message({
            type: "error",
            message: "添加异常",
          })
        })
      },
      //删除分类的方法
      remove(node, data) {
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            if (node.level == 1 && node.childNodes.length != 0) {
              this.$confirm("此结点下面有子节点", "是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
              }).then(() => {
                removeSubjectId(data.id)
                  .then((res) => {
                    console.log(res)
                    if (res.success) {
                      this.fetchNodeList();
                      this.$message({
                        type: "success",
                        message: "删除成功",
                      })
                    } else {
                      this.$message({
                        type: "error",
                        message: "删除失败",
                      })
                    }

                  })
                  .catch((err) => {
                    console.log(err);
                    this.$message({
                      type: "error",
                      message: "删除异常",
                    })
                  })
              }).catch(() => {
                //判断点击取消
                this.$message({
                  type: "info",
                  message: "已取消删除",

                })
              })
            } else {
              //调用方法进行删除
              removeSubjectId(data.id)
                .then((res) => {
                  if (res.success) {
                    this.fetchNodeList();
                    this.$message({
                      type: "success",
                      message: "删除成功",
                    })
                  } else {
                    this.$message({
                      type: "error",
                      message: "删除失败",
                    })
                  }

                })
                .catch((err) => {
                  console.log(err);
                  this.$message({
                    type: "error",
                    message: "删除异常",
                  })
                })
            }

          })
          .catch(() => {
            //判断点击取消
            this.$message({
              type: "info",
              message: "已取消删除",
            })
          })
      },
      fetchNodeList() {
        getNestedTreeList().then((response) => {
          if (response.success === true) {
            this.subjectList = response.data.items;
          }
        })
      },
      filterNode(value, data) {
        if (!value) return true;
        //return data.title.indexOf(value) !== -1
        return data.title.toLowerCase().indexOf(value.toLowerCase()) !== -1;
      },
    },
  }
</script>